import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { getDynamicFonts } from '@/utils/fontUtils';

interface ChatActionsModalProps {
  showActions: boolean;
  setShowActions: (v: boolean) => void;
  setShowConfirmDialog: (v: boolean) => void;
  isPCView: boolean;
  id: string | undefined;
  t: any;
  loading: boolean;
  navigate: (url: string, options?: { replace?: boolean }) => void;
  onResetChat: (chatId: string) => void;
}

const ChatActionsModal: React.FC<ChatActionsModalProps> = ({
  showActions,
  setShowActions,
  // setShowConfirmDialog,
  isPCView,
  id,
  t,
  loading,
  navigate,
  onResetChat
}) => {
  const [showConfirmReset, setShowConfirmReset] = useState(false);
  const { i18n } = useTranslation();
  const dynamicFonts = getDynamicFonts(i18n);

  const handleResetChat = () => {
    if (id) {
      onResetChat(id);
      setShowActions(false);
      setShowConfirmReset(false);
    }
  };

  if (!showActions) return null;

  return (
    <div
      style={{ fontFamily: dynamicFonts.font2 }}
      className="fixed inset-0 bg-[rgb(24,23,28)] bg-opacity-50 flex items-center justify-center z-50"
      onClick={() => {
        setShowActions(false);
        setShowConfirmReset(false);
        if (loading) {
          // 可选：重置 loading 状态
        }
      }}
    >
      <div
        className="bg-[rgb(24,23,28)] rounded-xl p-5 max-w-sm w-[80%] border border-[rgb(58,57,62)] shadow-xl"
        onClick={e => e.stopPropagation()}
      >
        {!showConfirmReset ? (
          <>
            {/* 清空聊天记录*/}
            <div
              style={{ borderBottom: '1px solid rgb(58,57,62)' }}
              onClick={() => setShowConfirmReset(true)}
              className="w-full text-center py-3 px-4 hover:bg-[#2a2a2a] mb-2 flex items-center justify-center cursor-pointer"
            >
              <i className="fas fa-trash-alt mr-2 text-[rgb(255,77,77)]"></i> {t('chat.clearHistory')}
            </div>
            {/* 查看相册*/}
            {/* {!isPCView && (
              <div
                style={{ borderBottom: '1px solid rgb(58,57,62)' }}
                className="w-full text-center py-3 px-4 hover:bg-[#2a2a2a] mb-2 flex items-center justify-center cursor-pointer"
                onClick={() => {
                  setShowActions(false);
                  if (id) {
                    navigate(`/ai-companion/${id}/album`, { replace: true });
                  }
                }}
              >
                <i className="fas fa-images mr-2 text-orange-400"></i> {t('chat.viewAlbum')}
              </div>
            )}
              */}
            {/* 关闭按钮*/}
            <div
              style={{ borderBottom: '1px solid rgb(58,57,62)' }}
              onClick={() => {
                setShowActions(false);
              }}
              className="w-full text-center py-3 px-4 hover:bg-[#2a2a2a] flex items-center justify-center cursor-pointer"
            >
              <i className="fas fa-times mr-2"></i> {t('common.cancel')}
            </div>
          </>
        ) : (
          <>
            {/* 确认清空聊天记录 */}
            <div className="text-center mb-4">
              <h3 className="text-white text-lg font-medium mb-2">{t('chat.confirmResetTitle')}</h3>
              <p className="text-gray-300 text-sm">{t('chat.confirmResetDesc')}</p>
            </div>

            {/* 确认按钮 */}
            <div
              onClick={handleResetChat}
              className="w-full text-center py-3 px-4 bg-red-600 hover:bg-red-700 rounded-lg mb-2 flex items-center justify-center cursor-pointer transition-colors"
            >
              <i className="fas fa-check mr-2 text-white"></i>
              <span className="text-white">{t('common.confirm')}</span>
            </div>

            {/* 取消按钮 */}
            <div
              onClick={() => setShowConfirmReset(false)}
              className="w-full text-center py-3 px-4 bg-gray-600 hover:bg-gray-700 rounded-lg flex items-center justify-center cursor-pointer transition-colors"
            >
              <i className="fas fa-times mr-2 text-white"></i>
              <span className="text-white">{t('common.cancel')}</span>
            </div>
          </>
        )}
      </div>
    </div>
  );
};

export default ChatActionsModal; 